/**
 * 使用Modal进行弹窗提示
 */
import {isArray} from 'lodash';
import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  FlatList,
  StatusBar,
} from 'react-native';
import {BProps, BState, BaseLine} from '../../index';
const NativeStoreMallModule = require('../../../core/modules/NativeStoreMallModule');

import { StringUtil } from '../../../core';
import {IconFont } from 'enoad-common/src/index';
import {v4 as uuidv4} from 'uuid';

const STATUS_BAR_HEIGHT = StatusBar.currentHeight; //即图中黄色部分

const content = [
  {id: uuidv4(), name: '客户', select: '请选择'},
  {id: uuidv4(), name: '价格表', select: '请选择'},
];

export default class StoreShopDialogComponent extends React.Component<
  BProps,
  BState
> {
  constructor(props: BProps) {
    super(props);
  }

  listItem = (item: any) => {
    let layouts = new Array();
    layouts.push(
      <TouchableOpacity
        style={styles.list_container}
        key={item.id}
        onPress={() => {
          NativeStoreMallModule.dismissDialog('true', JSON.stringify(item));
        }}>
        <Text style={styles.list_text_name}>{item.name}</Text>
        <View style={styles.list_select}>
          <Text style={styles.list_text_select}>{item.select}</Text>
          <IconFont name={'youfang'} size={14} color={'#C5CBD6'} />
        </View>
      </TouchableOpacity>,
    );
    return layouts;
  };
  cancel = () => {
    NativeStoreMallModule.dismissDialog('false', '');
  };

  render() {
    return (
      <TouchableOpacity
        style={styles.view}
        activeOpacity={1}
        onPress={() => {
          this.cancel();
        }}>
        <View style={styles.container}>
          <View style={styles.title}>
            <Text>{this.props.title}</Text>
            <TouchableOpacity
              style={styles.cancel}
              onPress={() => {
                this.cancel();
              }}>
              <Text style={styles.cancel_text}>{StringUtil('close')}</Text>
            </TouchableOpacity>
          </View>
          <BaseLine />
          {content && isArray(content) ? (
            <FlatList
              keyboardShouldPersistTaps="always"
              style={{flex: 1}}
              data={content}
              keyExtractor={(item, index) => index.toString()}
              renderItem={({item}) => {
                return this.listItem(item);
              }}
            />
          ) : null}
        </View>
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  view: {
    width: '100%',
    height: '100%',
    backgroundColor: '#8C8C929B',
  },
  container: {
    flex: 1,
    backgroundColor: 'white',
    position: 'absolute',
    flexDirection: 'column',
    width: '100%',
    paddingBottom: STATUS_BAR_HEIGHT,
    bottom: 0,
    left: 0,
    borderTopLeftRadius: 8,
    borderTopRightRadius: 8,
  },
  title: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    height: 44,
  },

  cancel: {
    position: 'absolute',
    right: 0,
    paddingRight: 15,
  },
  cancel_text: {padding: 5, color: '#4E80F5'},
  confirm: {
    width: 200,
    borderRadius: 20,
    backgroundColor: '#4E80F5',
    padding: 5,
    alignItems: 'center',
  },
  bottom: {
    backgroundColor: '#ffffff',
    paddingTop: 18,
    paddingBottom: 18,
    flex: 1,
    alignItems: 'center',
  },
  list_container: {
    flex: 1,
    flexDirection: 'column',
    padding: 10,
  },
  list_text_name: {
    color: '#71747A',
    fontFamily: 'PingFangSC-Regular',
    fontSize: 15,
  },
  list_select: {flexDirection: 'row', flex: 1, paddingRight: 10},
  list_text_select: {
    flex: 1,
    color: '#C5CBD6',
    fontFamily: 'PingFangSC-Regular',
    fontSize: 16,
  },
});
